<template>
  <div>
    <t-form class="baseForm" :data="formData" :rules="rule" ref="formRef">
      <div class="title">
        <span>合同信息</span>
      </div>
      <div class="formContaier">
        <t-row :gutter="[16, 24]">
          <t-col :span="6">
            <t-form-item
              label="合同名称"
              name="name"
              :style="{ width: '390px' }"
              labelAlign="top"
            >
              <t-input
                placeholder="请输入合同名称"
                v-model="formData.name"
                :style="{ width: '322px' }"
              />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item
              label="合同类型"
              name="type"
              :style="{ width: '390px' }"
              labelAlign="top"
            >
              <t-select
                placeholder="请输入合同名称"
                v-model="formData.type"
                :style="{ width: '322px' }"
              >
                <t-option value="类型A" label="类型A"></t-option>
                <t-option value="类型B" label="类型B"></t-option>
                <t-option value="类型C" label="类型C"></t-option>
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="8">
            <t-form-item label="合同收付类型" name="payfor" labelAlign="top">
              <t-radio-group v-model="formData.payforType.type">
                <t-radio value="get">收款</t-radio>
                <t-radio value="set">付款</t-radio>
              </t-radio-group>
              <t-input
                v-model="formData.payforType.num"
                placeholder="请输入金额"
                :style="{ width: '170px' }"
              ></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item
              label="甲方"
              name="jiafang"
              :style="{ width: '390px' }"
              labelAlign="top"
            >
              <t-select
                placeholder="请选择甲方公司"
                v-model="formData.jiafang"
                :style="{ width: '322px' }"
              >
                <t-option value="公司A" label="公司A"></t-option>
                <t-option value="公司B" label="公司B"></t-option>
                <t-option value="公司C" label="公司C"></t-option>
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item
              label="乙方"
              name="yifang"
              :style="{ width: '390px' }"
              labelAlign="top"
            >
              <t-select
                placeholder="请选择乙方公司"
                v-model="formData.yifang"
                :style="{ width: '322px' }"
              >
                <t-option value="公司A" label="公司A"></t-option>
                <t-option value="公司B" label="公司B"></t-option>
                <t-option value="公司C" label="公司C"></t-option>
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item
              label="合同签订日期"
              name="qiandingData"
              labelAlign="top"
            >
              <t-date-picker
                v-model="formData.qiandingData"
                :style="{ width: '322px' }"
              />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item
              label="合同生效日期"
              name="shengxiaoData"
              labelAlign="top"
            >
              <t-date-picker
                v-model="formData.shengxiaoData"
                :style="{ width: '322px' }"
              />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item
              label="合同结束日期"
              name="jieshuData"
              labelAlign="top"
            >
              <t-date-picker
                v-model="formData.jieshuData"
                :style="{ width: '322px' }"
              />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="上传合同文件" name="files" labelAlign="top">
              <t-upload
                class="upload"
                v-model="formData.files"
                action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                @fail="handleFail"
                @success="tips = ''"
                :format-response="formatResponse"
                theme="custom"
                multiple
              />
            </t-form-item>
          </t-col>
        </t-row>
        <div class="title" style="margin-top: 75px">
          <span>其他信息</span>
        </div>
        <t-row :gutter="[16, 24]" class="row">
          <t-col>
            <t-form-item label="备注" labelAlign="top">
              <t-textarea
                v-model="formData.beizhu"
                placeholder="请输入备注信息"
              ></t-textarea>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="公证人" labelAlign="top">
              <t-avatar class="addPerson" @click.native="addperson()"
                >+</t-avatar
              >
              <t-avatar v-for="(item, index) in person" :key="index">{{
                item
              }}</t-avatar>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row :gutter="[16, 24]" class="row">
          <t-form-item style="margin-left: 100px">
            <t-button
              @click="submitData"
              theme="primary"
              type="submit"
              style="margin-right: 10px"
              >提交</t-button
            >
            <t-button
              theme="default"
              variant="base"
              type="reset"
              style="margin-right: 10px"
              @click="reset1"
              >重置</t-button
            >
          </t-form-item>
        </t-row>
      </div>
    </t-form>

    <t-dialog
      header="添加公证人"
      :visible.sync="visible"
      :onConfirm="onConfirmAnother"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :onClose="close"
    >
      <div slot="body">
        <t-select placeholder="请选择公证人" v-model="gongzhengren">
          <t-option value="XXX" label="XXX"></t-option>
          <t-option value="YYY" label="YYY"></t-option>
          <t-option value="ZZZ" label="ZZZ"></t-option>
        </t-select>
      </div>
    </t-dialog>
  </div>
</template>

<script>
export default {
    data() {
        return {
            gongzhengren: null,
            person: [],
            formData: {
                payforType: {
                    type: null,
                    num: null,
                },
            },
            visible: false,
            rule: {
                name: [{ required: true, message: "请输入合同名称", type: "error" }],
                type: [{ required: true, message: "请选择合同类型", type: "error" }],
                payfor: [
                    { required: true, message: "请选择合同付款类型", type: "error" },
                ],
                jiafang: [{ required: true, message: "请选择甲方", type: "error" }],
                yifang: [{ required: true, message: "请选择乙方", type: "error" }],
                qiandingData: [
                    { required: true, message: "请选择合同签订日期", type: "error" },
                ],
                shengxiaoData: [
                    { required: true, message: "请选择合同生效日期", type: "error" },
                ],
                jieshuData: [
                    { required: true, message: "请选择合同结束日期", type: "error" },
                ],
                files: [{ required: true, message: "请上传合同文件", type: "error" }],
            },
        };
    },
    methods: {
        reset1() {
            this.$refs["formRef"].reset();
        },
        submitData() {
            console.log(this.formData);
            this.$message.success("提交成功");
        },
        formatResponse(error) {
            console.log(error);
            this.$message.error("上传失败");
        },
        handleFail() {
            this.$message.error("上传失败");
        },
        addperson() {
            this.visible = true;
        },
        onConfirmAnother() {
            this.person.push(this.gongzhengren);
            this.visible = false;
            this.gongzhengren = null;
        },
        close(context) {
            console.log("关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发", context);
        },
        onCancel(context) {
            console.log("点击了取消按钮", context);
        },
        onKeydownEsc(context) {
            console.log("按下了ESC", context);
        },
        onClickCloseBtn(context) {
            console.log("点击了关闭按钮", context);
        },
        onClickOverlay(context) {
            console.log("点击了蒙层", context);
        },
    },
};
</script>

<style lang="less" scoped>
.baseForm {
  background-color: #fff;
  padding: 50px 200px;
  .title {
    span {
      font-size: 20px;
      font-weight: 500;
    }
    .qita {
      margin-top: 20px;
    }
  }
  .formContaier {
    margin-top: 50px;
    .row {
      margin-top: 50px;
    }
    .upload {
      bottom: 0;
    }
    .addPerson {
      cursor: pointer;
    }
  }
}
</style>
